// ==========================================================================
// A nested map of all of our z-index values.
//
// Please add new values relative to their parent stacking context. For
// example the values of 'root' are elements with a stacking context that have no
// parents with a stacking context, other than the default html root.
//
// A Stacking Context is created when:
// 1. It's the root element (HTML)
// 2. Has a position other than static, with a z-index value
// 3. position:fixed
// 4. Has one of the following css properties: (transform, opacity<1, mix-blend-mode, filter)
// 5. isolation:isolate
// 6: -webkit-overflow-scrolling: touch
//
// So before adding a new z-index:
// 1. You'll want to make sure the element actually creates a stacking context
// 2. Look up what its parent stacking context is
// There's a Chrome devtools extension that can help you find both:
// https://chrome.google.com/webstore/detail/z-context/jigamimbjojkdgnlldajknogfgncplbh
//
// For readability please sort values from lowest to highest.
//
// Usage:
// .environment-badge {
//     z-index: z-index( 'root', '.environment-badge' );
// }
//
// For a refresher on stacking contexts see:
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
// ==========================================================================

$z-layers: (
	'root': (
		'.NuxWelcome:before': -1,
		'.is-group-editor::before': -1,
		'.is-group-gutenberg::before': -1,
		'.app-banner__illustration': -1,
		'.site-icon.is-blank .gridicon': 0,
		'.chart__bar-section.is-spacer': 0,
		'.reader__featured-post': 0,
		'.search-stream__input-card': 0,
		'.reader-search-card': 0,
		'.reader-featured-image': 0,
		'.reader-post-card__title': 0,
		'.tag-stream__header-follow': 0,
		'.reader-feed-header': 0,
		'.reader-feed-header__back-and-follow': 0,
		'.reader-recommended-sites__recommended-site-dismiss': 1,
		'.reader-related-card.card': 0,
		'.reader-full-post__sidebar-comment-like': 1,
		'.list-stream__header-follow': 0,
		'.following__intro-close-icon-bg' : 0,
		'.is-section-signup': 1,
		'.media-library .search.is-expanded-to-container': 1,
		'.ribbon': 1,
		'.plan-pill': 1,
		'.reader__featured-post-title': 1,
		'.reader-list-gap__button': 1,
		'.reader-following-search': 1,
		'.following-manage__url-follow': 1,
		'.following__intro-close-icon': 1,
		'.post-trends__title': 1,
		'.post-trends__scroll': 1,
		'.plugin-item__label': 1,
		'.wp-editor-tools': 1,
		'.plan .gridicons-checkmark-circle': 1,
		'.plan-discount-message': 1,
		'.post-editor__switch-mode': 1,
		'.auth__form .form-fieldset input': 1,
		'.chart__empty': 2,
		'.chart__bar-marker': 1,
		'.chart__bar-section.is-ghost::after': 1,
		'.module-content-table::after': 1,
		'.stats-popular__empty': 1,
		'.is-actionable .theme__thumbnail-label': 1,
		'.accessible-focus .current-theme__button:focus': 1,
		'.accessible-focus .theme__more-button button:focus': 1,
		'.domain-suggestion.is-clickable:hover': 1,
		'.editor-html-toolbar': 1,
		'.thank-you-card__header': 1,
		'.card.comment.is-bulk-mode:hover': 1,
		'.card.comment.accessible-focus:focus': 1,
		'.web-preview__loading-message-wrapper': 1,
		'.comment-detail.card.is-collapsed:hover': 1,
		'.comment-detail.card.accessible-focus:focus': 1,
		'.web-preview__inner .spinner-line': 1,
		'.google-my-business__close-icon': 1,
		'.google-my-business__stats-nudge.dismissible-card__close-icon': 1,
		'.is-section-purchases .search': 1,
		'.checklist__task': 1,
		'.editor-sidebar': 2,
		'.editor-action-bar .editor-status-label': 2,
		'.is-installing .theme': 2,
		'.people-list-item .card__link-indicator': 2,
		'.page__shadow-notice-cover': 2,
		'.auth__form .form-fieldset input:focus': 2,
		'.chart__bar-section': 2,
		'.module-content-table tbody th:first-child': 2,
		'ul.module-header-actions .module-header-action-link': 2,
		'.stats-module.is-loading .module-header-title::after': 2,
		'ul.module-content-list-item-action-submenu': 2,
		'ul.module-content-list-item-actions': 2,
		'.editor-word-count': 3,
		'.site-indicator__button': 3,
		'ul.module-content-list-item-actions.collapsed': 3,
		'.auth__input-wrapper .gridicon': 3,
		'.jetpack-connect__password-form .gridicon': 3,
		'.jetpack-connect__creds-form-footer .jetpack-connect__creds-form-spinner':3,
		'.auth__self-hosted-instructions': 4,
		'.auth__form .form-password-input__toggle-visibility': 4,
		'.site-selector': 10,
		'.editor-featured-image__preview.is-transient::after': 10,
		'.layout__secondary .site-selector': 10,
		'.range__label': 10,
		'.sticky-panel.is-sticky .sticky-panel__content': 20,
		'.editor-featured-image .editor-drawer-well__remove': 20,
		'.main': 20, //TODO: this doesn't always have a stacking context
		//'tinymce-toolbar': 20, client/components/tinymce/index.jsx
		'.main.calypsoify.is-iframe': 20,
		'.search': 22,
		'.reader-update-notice': 22,
		'.editor-ground-control': 22,
		'.search-stream__sort-picker': 23,
		'.billing-history-page .filter-popover-content': 23,
		'.reader-mobile-sidebar': 23,
		'.community-translator': 99,
		'.author-selector__popover.popover': 100,
		'.feature-example__gradient': 170,
		'.select-dropdown.is-open .select-dropdown__container': 170,
		'.accessible-focus .select-dropdown.is-open .select-dropdown__container': 170,
		'.sites-dropdown.is-open .sites-dropdown__wrapper' : 170,
		'.editor-publish-date.is-open .editor-publish-date__wrapper': 170,
		'.floating-help': 176,
		'.directly-rtm.is-minimized': 176,
		'.editor-confirmation-sidebar__overlay': 176,
		'.editor-confirmation-sidebar__sidebar': 177,
		'.happychat__container.is-open': 177,
		'.popover.comment__author-more-info-popover': 178,
		'.popover.editor-ground-control__post-schedule-popover': 178,
		'.popover.editor-visibility__popover': 179,
		'.global-notices': 179,
		'.editor-preview': 179,
		'.editor-gutenberg-opt-in-notice': 179,
		'.app-banner': 180,
		'.masterbar': 180,
		'.gdpr-banner': 185,
		'.legal-updates-banner': 185,
		'.detail-page__backdrop': 190,
		'.layout__loader': 200,
		'.offline-status': 200,
		'.environment-badge': 999,
		'.customizer-loading-panel__placeholder-change-theme': 999,
		'.module-overlay': 1000,
		'.drop-zone': 1000,
		'.popover': 1000,
		'.sharing-buttons-preview-buttons__more': 1000,
		'.sortable-list__item.is-draggable.is-active': 1000,
		'.chart__tooltip': 1000,
		'.drop-zone__content': 1010,
		'.main.customize.is-iframe': 9999,
		'.fullscreen-overlay': 100005,
		'#wp_editbtns': 100020,
		'#wp-fullscreen-body': 100010,
		'.wp-fullscreen-wrap': 100015,
		'#wp-fullscreen-statusbar': 100020,
		'#fullscreen-topbar': 100020,
		'.wp-fullscreen-active #TB_overlay': 100050,
		'.wp-fullscreen-active #TB_window': 100051,
		'div.mce-inline-toolbar-grp': 100100,
		'.dialog__backdrop': 100200,
		'.wplink__dialog.dialog.card': 100200,
		'.web-preview': 100200,
		'.popover.gallery__order-popover': 100300,
		'popover.is-dialog-visible': 100300,
		'.popover.info-tooltip__container': 100300,
		'body .webui-popover': 100300,
		'.fullscreen-fader': 200000,
		'.guided-tours__overlay': 200050,
		'.guided-tours__step': 201000,
		'.wpcom-site__global-noscript': 300000, // JS off always visible
		'.is-section-woocommerce .global-notices': 999999, //render notices on top of dialogs
		'.webpack-build-monitor': 99999999,
		'.image-selector__item.is-transient::after': 1,
		'.image-selector__item .spinner': 2,
		'.upwork-stats-nudge__close-icon': 1,
		'.gsuite-stats-nudge__close-icon': 1,
		'.people-list-item.card.is-compact:focus': 1,
		'.themes-banner__close': 1,
	),
	'.is-section-signup': (
		'.is-section-signup::before': -1,
		'.layout__primary::before': -1,
	),
	'.ribbon': (
		'.ribbon__title::before': -1,
		'.ribbon__title::after': -1
	),
	'.environment-badge': (
		'.environment-badge .environment::before': -1,
		'.environment-badge .bug-report': 1000
	),
	'.masterbar': (
		'.masterbar__notifications-bubble': 99999,
		'.reader-back': 99999,
		'.reader-visit-site': 99999,
		'.reader-profile': 100000
	),
	'.detail-page__backdrop': (
		'.detail-page__action-buttons': 200
	),
	'.popover': (
		'.input-chrono__input': 1,
		'.popover .popover__arrow': 1,
		'.post-schedule__header': 1,
		'.date-picker__nav-bar': 2,
		'.search-filters__popover': 179,
	),
	'.search': (
		'.search__input': 10,
		'.search.is-searching .spinner': 20,
		'.search .search__open-icon': 20,
		'.search .search__close-icon': 20
	),
	'.profile-gravatar__edit-label-wrap': (
		'.profile-gravatar__edit-label-wrap:after': 0,
		'.profile-gravatar__edit-label': 1000
	),
	'.media-library__list-item': (
		'.media-library__list-item.is-selected::after': 10,
		'.media-library__list-item.is-transient .media-library__list-item-figure::after': 10,
		'.media-library__list-item-selected-icon .gridicon': 20,
		'.media-library__list-item-spinner': 20,
	),
	'.dialog__backdrop': (
		'.editor-media-modal .section-nav': 10,
		'.editor-media-modal .notice': 10,
		'.editor-contact-form-modal .section-nav': 10,
		'.editor-media-modal-gallery__preview-toggle': 100
	),
	'.site-settings__taxonomies': (
		'.card__link-indicator': 1
	),
	'.reader-feed-header': (
		'.reader-feed-header__site': 0,
		'.reader-feed-header__follow': 1
	),
	'.reader-feed-header__back-and-follow': (
		'.card.header-cake': 1,
		'.reader-feed-header__follow': 1
	),
	'.reader-full-post__sidebar-comment-like': (
		'.reader-full-post .back-button': 2,
		'.author-compact-profile__follow .follow-button': 2,
		'.reader-full-post__visit-site-container': 2
	),
	'.reader-related-card.card': (
		'.reader-related-card__meta': 1
	),
	'.reader-related-card__meta': (
		'.follow-button': 1
	),
	'.list-stream__header-follow': (
		'.follow-button': 1
	),
	'.stats-post-summary': (
		'.section-nav': 1
	),
	'.thank-you-card__header' : (
		'.thank-you-card__background-icons .gridicon': 1,
		'.thank-you-card__main-icon': 2,
		'.thank-you-card__header-detail': 2
	),
	'.upwork-banner': (
		'.button.upwork-banner__cta': 2,
		'.button.upwork-banner__close': 4
	),
	'.checklist__task': (
		'.checklist__task::before': 10,
		'.checklist__task-icon': 20
	),

	// The following may be inserted into different areas.
	// The parent stacking context may be root, or something else depending on where it is inserted.
	'icon-parent': (
		'.sidebar__menu .gridicon.gridicons-external': 1
	),
	'screen-reader-text-parent': (
		'.screen-reader-text:focus': 100000
	),
	'button-group-parent': (
		'.button-group .button:focus': 1
	),
	'progress-indicator-parent': (
		'.progress-indicator .is-success': 2
	),
	'section-nav-tabs__dropdown-parent': (
		'.section-nav-tabs__dropdown': 3,
		'.section-nav-tabs__dropdown.is-open': 4
	),
	'reader-card-follow-button-parent': (
		'.reader__card.card .follow-button': 1
	),
	'.tag-stream__header-follow': (
		'.follow-button': 1
	)
);

// allows us to do a nested fetch
@function map-deep-get( $map, $keys... ) {
	@each $key in $keys {
		@if not map-has-key( $map, $key) {
			@warn 'No layer found for `#{$key}` of `[#{ $keys }]` in $z-layers map. Property omitted.';
			@return map-get( $map, $key );
		}
		$map: map-get( $map, $key );
	}
	@return $map;
}

@function z-index( $keys... ) {
	@return map-deep-get( $z-layers, $keys... );
}
